﻿@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>首页预览-小程序会员中心</title>
    <link href="/admin_store/css/site.css" rel="stylesheet" />
    <style>
    body{margin:0;padding:0}
    .preview-wrap{position:fixed;width:100%;text-align:left;overflow-y:auto;height:100%;overflow-x:hidden}
    #phone-component{position:relative;display:inline-block;width:332px;height:678px;margin-left:30px;margin-right:30px;background-image:url(http://static.711688.net.cn/weapp/images/6s.png);background-size:100% 100%;background-repeat:no-repeat;vertical-align:top;z-index:999}
    .phone-head{position:absolute;top:81px;left:22px;width:288px;height:58px;background-image:url(http://static.711688.net.cn/weapp/images/phone-head.jpg);background-size:100% 100%;background-repeat:no-repeat}
    .phone-content{position:absolute;top:139px;left:22px;width:288px;height:454px;overflow:hidden;background-color:#fff}
    .preview-iframe{display:block;position:relative;width:320px;height:504px;transform:scale(.9);-webkit-transform:scale(.9);-ms-transform:scale(.9);-moz-transform:scale(.9);transform-origin:0 0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;-moz-transform-origin:0 0;outline:0;border:none}
    .phone-head span{color:#fff;cursor:pointer;position:absolute;left:10px;top:25px;font-size:14px;line-height:25px;padding-left:14px;background-image:url(http://static.711688.net.cn/weapp/images/left.png);background-size:auto 15px;background-repeat:no-repeat;background-position:left center}
    #phone-component.phone-6plus{width:332px;height:670px;background-image:url(http://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone/6s.png)}
    #phone-component.phone-6plus .phone-head{top:81px;left:22px;width:288px}
    #phone-component.phone-6plus .phone-content{top:139px;left:22px;width:288px;height:446px}
    #phone-component.phone-6plus .preview-iframe{width:320px;height:495px;transform:scale(.9);-webkit-transform:scale(.9);-ms-transform:scale(.9);-moz-transform:scale(.9)}
    #phone-component.phone-5s{width:312px;height:648px;background-image:url(http://static.711688.net.cn/weapp/images/5s.png)}
    #phone-component.phone-5s .phone-head{top:93px;left:25px;width:262px}
    #phone-component.phone-5s .phone-content{top:150px;left:26px;width:260px;height:405px}
    #phone-component.phone-5s .preview-iframe{width:320px;height:498px;transform:scale(.8125);-webkit-transform:scale(.8125);-ms-transform:scale(.8125);-moz-transform:scale(.8125)}
    .code-container{display:inherit;width:208px;height:260px;margin:20px 0 50px 80px;border:0}
    .code-container div{border:4px solid #ff8427}
    .code-container p{text-align:center;color:#ff8427;margin-top:10px}
    .box{width:557px;position:relative;cursor:pointer}
    .box a{color:#fff}
    .box .bmbox{width:557px;height:100%;background:#000;position:absolute;bottom:0;left:0;display:none;font:12px/30px "宋体";color:#fff;text-align:center}
    .box:hover .bmbox{background-color:rgba(0,0,0,.5);display:block;text-align:center;vertical-align:center}
    .btn{font-size:18px;line-height:200%;border-radius:5px;background-color:coral;color:#fff;padding:5px;display:block;width:200px;margin-left:180px;text-decoration:none}
    </style>
</head>
<body>
    <h1 class="rightH1">
        微信小程序 > 首页定制 >	<span class="rightH1-cur">首页预览</span>
        <div class="right">
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </h1>
    <table width="100%">
        <tr>
            <td width="557px">

                <div class="box" style="height:264px">
                    <img src="/admin_store/images/preview_0.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/widgetconfiglist?code=index_banner" target="_blank" class="btn" style="margin-top: 100px">设置轮播图</a>
                    </div>
                </div>
                <div class="box" style="height:413px">
                    <img src="/admin_store/images/preview_1.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/IndexPictureWidgetConfigList" target="_blank" class="btn" style="margin-top: 180px">设置图片A区</a>
                    </div>
                </div>
                <div class="box" style="height:162px">
                    <img src="/admin_store/images/preview_2.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/widgetconfiglist?code=index_nav_icon" target="_blank" class="btn" style="margin-top: 50px">设置分类导航</a>
                    </div>
                </div>
                <div class="box" style="height:160px">
                    <img src="/admin_store/images/preview_3.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/IndexPictureWidgetConfigList" target="_blank" class="btn" style="margin-top: 50px">设置图片B区</a>
                    </div>
                </div>
                <div class="box" style="height:300px">
                    <img src="/admin_store/images/preview_4.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/news/newstypelist" target="_blank" class="btn" style="margin-top: 110px">设置内容分类</a>
                    </div>
                </div>
                <div class="box" style="height:295px">
                    <img src="/admin_store/images/preview_5.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/IndexPictureWidgetConfigList" target="_blank" class="btn" style="margin-top: 110px">设置图片C区</a>
                    </div>
                </div>
                <div class="box" style="height:946px">
                    <img src="/admin_store/images/preview_6.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/widgetconfiglist?code=index_product" target="_blank" class="btn" style="margin-top: 430px">设置商品</a>
                    </div>
                </div>
                <div class="box" style="height:166px">
                    <img src="/admin_store/images/preview_7.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/store/IndexPictureWidgetConfigList" target="_blank" class="btn" style="margin-top: 55px">设置图片D区</a>
                    </div>
                </div>
                <div class="box" style="height:58px">
                    <img src="/admin_store/images/preview_8.jpg" />
                    <div class="bmbox">
                        <a href="/storeadmin/weapp/StoreAppList" target="_blank" class="btn" style="margin-top: 5px">设置底部导航</a>
                    </div>
                </div>
            </td>
            <td style="vertical-align: top;text-align:left">
                <div id="preview-wrap" class="preview-wrap">

                    <div id="phone-component" class="phone-5s">
                        <div class="phone-head">
                            <span id="go-back">返回</span>
                        </div>
                        <div id="phone-container" class="phone-content">
                            <iframe class="preview-iframe" id="preview-iframe" frameborder="0" allowtransparency="true" src="https://appstore.711688.net.cn/#/weapp/preview?storeid=@WorkContext.StoreId"></iframe>
                        </div>
                    </div>

                    <div class="code-container">
                        <div>
                            <img src="http://qr.liantu.com/api.php?text=@Url.Encode("http://appstore.711688.net.cn/#/weapp/preview?storeid=" + @WorkContext.StoreId)" id="preview-code">
                        </div>
                        <p>手机扫描二维码，预览效果</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>